<%--
  Created by IntelliJ IDEA.
  User: Silas
  Date: 2017/3/5
  Time: 13:37
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>民生资金大数据平台</title>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css"
          href="/resources/assets/datav/css/iconfont.css">
    <link rel="stylesheet"
          href="/resources/assets/datav/css/style.css">
</head>
<body>
<div class="datavLayout" style="display: none;">
    <div class="datavTextLogo">
        <img src="/resources/assets/datav/image/729f36f3890a2cc2ec356285469a9a13.png" class="left">
        <div class="text">西宁市民生工程货币化资金发放大数据平台</div>
        <img src="/resources/assets/datav/image/a23ee39a3634282e941705925887ea97.png" class="left">
        <div class="time"></div>
    </div>
    <div class="img-box">
        <img src="/resources/assets/datav/image/385b13c1b7e06e91d8a8ec0357637505.png" alt="" class="img1">
        <img src="/resources/assets/datav/image/41e2f356b6dce301317bb2a7a66852f2.png" alt="" class="img2">
        <img src="/resources/assets/datav/image/eab3c95560a5d92c1025306bcf62ae88.png" alt="" class="img3">
        <img src="/resources/assets/datav/image/edd61a47dd4231803d255d11a16f7d28.png" alt="" class="img4">
    </div>
    <!-- <div class="top-data">
			<div class="inline-block">
				<div class="title">发放总人次</div>
				<div class="msg"><i class="grantTotal"></i><span>人</span></div>
			</div>
			<div class="inline-block">
				<div class="title">发放总金额</div>
				<div class="msg"><i class="grantMoney"></i><span>元</span></div>
			</div>
		</div> -->

    <!-- 左上角字符云图 -->
    <div class="lt-map">
        <div class="title">补贴项目分析</div>
        <div class="lt-word"></div>
    </div>
    <!-- 地图 -->
    <div class="xn-map"></div>
    <div class="xn-map-data">
        <div class="title">地区发放情况</div>
        <div class="msg">
            <div class="item">
                <h3>发放项目数</h3>
                <p><i class="num1"></i><span>个</span></p>
            </div>
            <div class="item">
                <h3>发放批次</h3>
                <p><i class="num2"></i><span>次</span></p>
            </div>
            <div class="item">
                <h3>发放人次</h3>
                <p><i class="num3"></i><span>次</span></p>
            </div>
            <div class="item">
                <h3>发放金额</h3>
                <p><i class="num4"></i><span>元</span></p>
            </div>
            <div class="item">
                <h3>覆盖人口</h3>
                <p><i class="num5"></i><span>人</span></p>
            </div>
        </div>
    </div>
    <!-- 左下角饼图 -->
    <div class="lb-map">
        <div class="title">近三年资金类别占比分析</div>
        <div class="lb-pie"></div>
    </div>
    <!-- 中下角折线柱状图 -->
    <!-- <div class="mb-map">
        <div class="title">当年发放情况</div>
        <div class="mb-bar"></div>
    </div> -->
    <!-- 右下角比例图 -->
    <div class="rb-map">
        <div class="title">近三年资金发放情况</div>
        <div class="rb-pie">
        </div>
    </div>
</div>
<style id="style"></style>
<script id="cssTemp" type="text/html">
    .title{
    font-size: {{20*scale}}px;
    background: url(/resources/assets/datav/image/6ac43d2d83702455ade20bcd5fab3591.png) center bottom no-repeat;
    padding-bottom: {{15*scale}}px;
    min-width: {{230*scale}}px;
    height: {{40*scale}}px;
    background-size: 100% auto;
    display: inline-block;
    padding-right: 11px;
    }
    /*头部标题*/
    .datavTextLogo{
    position: absolute;
    top: {{16*scale}}px;
    left: 50%;
    transform: translate(-50%,0);
    width: {{1400*scale}}px;
    text-align: center;
    }
    .datavTextLogo div{
    display: inline-block;
    vertical-align: top;
    }
    .datavTextLogo .left, .datavTextLogo .right{
    display: inline-block;
    vertical-align: top;
    width: {{180*scale}}px;
    height: {{35*scale}}px;
    margin: {{14*scale}}px {{20*scale}}px;
    }
    .datavTextLogo .text{
    background: url(/resources/assets/datav/image/b1d4dfdbfb66f2b4bc03a6c7d5b500ed.png) center bottom no-repeat;
    font-size: {{40*scale}}px;
    padding-bottom: {{15*scale}}px;
    background-size: 100% auto;
    }
    .datavTextLogo .time{
    display: block;
    text-align: center;
    font-size: {{30*scale}}px;
    padding-top: {{30*scale}}px;
    }
    .img-box img{
    position: absolute;
    width: {{180*scale}}px;
    height: {{185*scale}}px;
    }
    .img-box .img1{
    left: {{16*scale}}px;
    top: {{24*scale}}px;
    }
    .img-box .img2{
    right: {{16*scale}}px;
    top: {{24*scale}}px;
    }
    .img-box .img3{
    left: {{16*scale}}px;
    bottom: {{16*scale}}px;
    }
    .img-box .img4{
    right: {{16*scale}}px;
    bottom: {{16*scale}}px;
    }
    /*头部数据*/
    .top-data{
    position: absolute;
    top: {{125*scale}}px;
    left: 50%;
    transform: translate(-50%,0);
    }
    .top-data .inline-block{
    margin: 0 {{90*scale}}px;
    }
    .top-data .msg{
    font-size: {{56*scale}}px;
    color: rgb(251, 243, 32);
    }
    .top-data .msg span{
    font-size: {{22*scale}}px;
    color: #59ebe8;
    vertical-align: middle;
    margin-left: {{10*scale}}px;
    }
    /*左上角字符云*/
    .lt-map{
    position: absolute;
    right: {{80*scale}}px;
    bottom: {{50*scale}}px;
    width: {{450*scale}}px;
    }
    .lt-map .lt-word{
    height: {{360*scale}}px;
    width: {{500*scale}}px;
    margin: -{{0*scale}}px -{{30*scale}}px;
    position: relative;
    top: {{20*scale}}px
    }
    /*地图*/
    .xn-map{
    position: absolute;
    top: {{173*scale}}px;
    width: {{800*scale}}px;
    height: {{900*scale}}px;
    left: 50%;
    transform: translate(-50%,0);
    }
    .xn-map-data{
    position: absolute;
    right: {{30*scale}}px;
    top: {{240*scale}}px;
    width: {{500*scale}}px;
    }
    .xn-map-data .msg{
    margin-top: {{50*scale}}px;
    }
    .xn-map-data .item{
    display: inline-block;
    margin: 0 {{20*scale}}px {{45*scale}}px 0;
    width: {{140*scale}}px;
    height: {{105*scale}}px;
    background-image: url(/resources/assets/datav/image/13c890ebf14a1a23c168fc01e445932a.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding-left: {{16*scale}}px;
    }
    .xn-map-data .item h3{
    font-size: {{14*scale}}px;
    padding-top: {{20*scale}}px;
    padding-bottom: {{16*scale}}px;
    }
    .xn-map-data .item p{
    font-size: {{23*scale}}px;
    color: #59ebe8;
    }
    /*左下角饼图*/
    .lb-map{
    position: absolute;
    left: {{50*scale}}px;
    bottom: {{40*scale}}px;
    }
    .lb-map .lb-pie{
    height: {{360*scale}}px;
    width: {{500*scale}}px;
    position: relative;
    top: {{20*scale}}px
    }
    /*中下角折线柱状图*/
    .mb-map{
    position: absolute;
    left: 50%;
    transform: translate(-50%,0);
    bottom: {{20*scale}}px;
    }
    .mb-map .title{
    margin-left: {{50*scale}}px;
    }
    .mb-map .mb-bar{
    height: {{320*scale}}px;
    width: {{800*scale}}px;
    margin: -{{20*scale}}px -{{0*scale}}px;
    }
    /*右下角比例图*/
    .rb-map{
    position: absolute;
    left: {{65*scale}}px;
    top: {{240*scale}}px;
    width: {{500*scale}}px;
    }
    .rb-map .rb-pie{
    height: {{320*scale}}px;
    width: {{500*scale}}px;
    position: relative;
    top: {{20*scale}}px;
    left: -{{15*scale}}px;
    }
    .rb-map .item{
    padding: {{10*scale}}px 0;
    text-align: center;
    }
    .rb-map .item .msg{
    display: inline-block;
    vertical-align: middle;
    font-size: {{40*scale}}px;
    padding-top: {{35*scale}}px;
    }
    .rb-map .item .img{
    position: relative;
    display: inline-block;
    vertical-align: top;
    text-align:left;
    }
    .rb-map .item .img i{
    font-size: {{100*scale}}px;
    color: #ddd
    }
    .rb-map .item .pa{
    position: absolute;
    bottom: 0;
    overflow: hidden;
    width: {{80*scale}}px;
    }
    .rb-map .item .pa i{
    position: absolute;
    bottom: 0;
    color: #59ebe8;
    }
    .tip{
    font-size: {{24*scale}}px;
    }
</script>
<script src="/resources/assets/datav/js/jquery-2.1.1.min.js"></script>
<script src="/resources/assets/datav/js/echarts.js"></script>
<script src="/resources/assets/datav/js/template.js"></script>
<script src="/resources/assets/datav/js/index.js?v=1.0.0"></script>

</body>
</html>
